<template>
    <div class="login">
        <canvas id="canvas" :width="clientWidth1" :height="clientHeight1" ></canvas>
        <!--<canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas>-->
        <div class="login-box">
            <div class="login-box-left">
                <img src="../../assets/ourlogo.png" alt="" class="login-box-left-img">
                <div class="login-title">欢迎使用管理系统</div>
                <el-row  class="login-describe">
                    <el-col :span="8">
                        <el-col :span="13">&nbsp;</el-col>
                        <el-col :span="10">
                            <div class="login-describe-icon"><i class="fa fa-check-circle login-describe-icon-i"></i></div>
                        </el-col>
                    </el-col>
                    <el-col :span="16">
                        <el-col :span="24" class="login-des-title">优势之势</el-col>
                        <el-col :span="24" class="login-des-content">"硬科技+大产业"的无限可能</el-col>
                    </el-col>
                </el-row>
                <el-row  class="login-describe">
                    <el-col :span="8">
                        <el-col :span="13">&nbsp;</el-col>
                        <el-col :span="10">
                            <div class="login-describe-icon"><i class="fa fa-check-circle login-describe-icon-i"></i></div>
                        </el-col>
                    </el-col>
                    <el-col :span="16">
                        <el-col :span="24" class="login-des-title">解决方案</el-col>
                        <el-col :span="24" class="login-des-content">融合物联网整体解决方案提供商</el-col>
                    </el-col>
                </el-row>
                <el-row  class="login-describe">
                    <el-col :span="8">
                        <el-col :span="13">&nbsp;</el-col>
                        <el-col :span="10">
                            <div class="login-describe-icon"><i class="fa fa-check-circle login-describe-icon-i"></i></div>
                        </el-col>
                    </el-col>
                    <el-col :span="16">
                        <el-col :span="24" class="login-des-title">客户案例</el-col>
                        <el-col :span="24" class="login-des-content">优势科技产品广泛应用各行业</el-col>
                    </el-col>
                </el-row>
                <el-row  class="login-describe">
                    <el-col :span="8">
                        <el-col :span="13">&nbsp;</el-col>
                        <el-col :span="10">
                            <div class="login-describe-icon"><i class="fa fa-check-circle login-describe-icon-i"></i></div>
                        </el-col>
                    </el-col>
                    <el-col :span="16">
                        <el-col :span="24" class="login-des-title">合作伙伴</el-col>
                        <el-col :span="24" class="login-des-content">与优势-共发展-赢未来</el-col>
                    </el-col>
                </el-row>
            </div>
            <div class="login-box-right">
                <div class="login-right-title">
                    <img src="../../assets/login.png" width="80" alt="">
                </div>
                <div style="position: relative">
                    <div class="login-right-i">
                        <i class="el-icon-mobile-phone"></i>
                    </div>
                    <input type="text" v-model="phone" placeholder="请输入用户名" autocomplete="off">
                </div>
                <div style="position: relative">
                    <div class="login-right-i">
                        <i class="el-icon-more"></i>
                    </div>
                    <input type="password" v-model="password" placeholder="请输入密码" autocomplete="off">
                </div>
                <div class="login-regist">
                    <!--<span style="color:#fff;text-shadow: 0px 0px 0px #000;font">立即注册</span>-->
                    <!--<span>忘记密码？</span>-->
                </div>
                <div class="login-ing" @click="loginIn">登陆</div>
            </div>
        </div>
    </div>

</template>
<script>
    import router from "../../routes.js";
    export default {
        data() {
            return {
                phone:'',
                password:'',
                clientHeight1:0,
                clientWidth1:0,
                positionX:30,
                positionY:30,
            }
        },
        mounted() {
            this.creatCanvas();
            this.transition1();
        },
        methods: {
            creatCanvas(){
                var canvas = document.querySelector('#canvas');
                var ctx = canvas.getContext("2d");
                var starlist = [];
                function init(){
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight-5;
                }
                init();
                window.onresize = init;
                canvas.addEventListener('mousemove',function(e){
                    starlist.push(new Star(e.offsetX,e.offsetY));
                })

                function random(min,max){
                    return Math.floor((max-min)*Math.random()+ min);
                }

                function Star(x,y){
                    this.x = x;
                    this.y = y;
                    this.vx = (Math.random()-0.5)*3;
                    this.vy = (Math.random()-0.5)*3;
                    this.color = 'rgba('+random(200,256)+','+random(200,256)+','+random(200,256) + ','+ 0.3 + ')';
                    this.a = 1;
                    // console.log(this.color);
                    this.draw();
                }
                Star.prototype={
                    draw:function(){
                        ctx.beginPath();
                        ctx.fillStyle = this.color;
                        ctx.globalCompositeOperation='lighter'
                        ctx.globalAlpha= this.a;
                        ctx.arc(this.x,this.y,4,0,Math.PI*2,false);
                        ctx.fill();
                        this.updata();
                    },
                    updata(){
                        this.x+=this.vx;
                        this.y+=this.vy;
                        this.a*=0.98;
                    }
                }
                function render(){
                    ctx.clearRect(0,0,canvas.width,canvas.height)

                    starlist.forEach((item,i)=>{
                        item.draw();
                        if(item.a<0.05){
                            starlist.splice(i,1);
                        }
                    })

                    requestAnimationFrame(render);
                }
                render();
            },
            transition1() {
                var loginDescribe = document.querySelectorAll('.login-describe');
                var loginImg = document.getElementsByClassName('login-box-left-img');
                loginImg[0].style.left = 161 + 'px';
                loginImg[0].style.opacity =0.8;
                loginImg[0].style.transform = "rotate(0deg)";
                for (let key in loginDescribe) {
                    loginDescribe[key].style.transitionDelay =key/10 + 's';
                    loginDescribe[key].style.opacity = 1;
                }
            },
            loginIn() {
                if (!this.$funcs.isPhone(this.phone)) {
                    this.$message.error('请输入正确手机号！');
                    return;
                }
                if (!this.password) {
                    this.$message.error('请输入正确密码！');
                    return;
                }
                this.$http.post('common/adminlogin/',{ phone: this.phone, password: this.password  })
                .then((response)=>{
                    console.info(response);
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: 'success'
                    });
                    if (response.status) {
                        localStorage.setItem('api_token', response.data.data.api_token);
                        setTimeout( () =>{
                            router.push({
                                name: "home"
                            });
                        }, 1500);
                    }
                })
                .catch((err)=>{
                    this.$message.error(err);
                });
            },
        }
    }
</script>
<style scoped>
    .newDivMain{
        position: absolute;
        top:30px;
        left: 30px;
        z-index: 16;
        width: 30px;
        height: 30px;
        background-color: red;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: #ddd;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ddd;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ddd;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #ddd;
    }
    .login{
        font-family: '微软雅黑';
        width: 100%;
        background: url("https://cn.bing.com/az/hprichbg/rb/CupFungus_ZH-CN9348475069_1920x1080.jpg");
        position: relative;

    }
    .login-box{
        width: 700px;
        height: 450px;
        position: absolute;
        top: 50%;
        margin-top: -225px;
        left: 50%;
        margin-left: -350px;
        z-index: 15;
        border-radius: 5px;
        overflow: hidden;
    }
    .login-box-left,.login-box-right{
        width: 50%;
        float: left;
        height: 100%;
        overflow: hidden;
    }
    .login-box-left{
        background-color: #1abc9c;
        position: relative;
    }
    .login-box-left img{
        position: absolute;
        width:64px ;
        height: 64px;
        display: block;
        left: -64px;
        top: 40px;
        /*margin: 40px auto 0;*/
        opacity: 0;
        transition: all 0.5s ease-in;
        transform: rotate(360deg);
    }
    .login-title{
        margin-top: 104px;
        letter-spacing: 1px;
        font-size: 16px;
        padding: 14px 0 10px 0;
        text-align: center;
        color:rgba(255,255,255,0.9);
    }
    .login-describe{
        margin-top: 20px;
        opacity: 0;
        transition:opacity 0.5s linear;
    }
    .login-describe-icon-i{
        color:rgba(255,255,255,0.4);
        font-size: 40px;
    }
    .login-des-title{
        font-size: 14px;
        /*padding-top: 3px;*/
        letter-spacing: 1px;
        color:rgba(255,255,255,1);
    }
    .login-des-content{
        font-size: 12px;
        letter-spacing: 1px;
        padding-top: 4px;
        color:rgba(255,255,255,0.7);
    }
    .login-box-right{
        background-color: #fff;
    }
    .login-right-title{
        font-size: 36px;
        text-align: center;
        padding-top: 45px;
    }
    .login-box-right input{
        display: block;
        height: 45px;
        padding-left:55px ;
        color: #666;
        background-color: #fff;
        border: 0px;
        outline: none;
        border:1px #ddd solid;
    }
    .login-box-right input, .login-ing{
        width:300px;
        font-size: 16px;
        margin: 40px auto 0;
        border-radius: 3px;
    }
    .login-ing{
        height: 50px;
        letter-spacing: 10px;
        line-height: 50px;
        text-align: center;
        margin: 60px auto 0;
        cursor: pointer;
        color:#fff;
        font-size: 18px;
        background-color: #1ABC9C;
    }
    .login-ing:hover{
        background-color: #139077;
    }
    .login-right-i{
        position: absolute;
        top: 10px;
        left: 35px;
        z-index: 14;
    }
    .login-right-i i{
        font-size: 25px;
        color: #1ABC9C;
    }
    .login-right-icon{
        font-size: 28px;
        color: rgba(255,255,255,0.6);
    }
    .login-regist{
        font-size: 16px;
        width:300px;
        margin: 0 auto;
        overflow: hidden;
    }
    .login-regist span{
        cursor: pointer;
        margin: 15px 0 0 20px;
    }
    .login-regist span:nth-of-type(1){
        font-weight: 500;
        float: left;
        color: rgba(255,255,255,0.8);
    }
    .login-regist span:nth-of-type(2){
        font-weight: 500;
        float: right;
        color: rgba(0,0,0,0.6);
    }
    .login-regist span:nth-of-type(1):hover{
        font-weight: 650;
        color: rgba(255,255,255,1);
    }
    .login-regist span:nth-of-type(2):hover{
        font-weight: 650;
        color: rgba(0,0,0,1);
    }
</style>